﻿<%@ Page Title="局部更新" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AJAX.aspx.cs" Inherits="WebForm.AJAX" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> 
        
    <p>
        本页示例展示在页面加载后，不进行表单POST请求，而通过 AJAX 进行数据获取和页面局部更新，从而避免整个页面的刷新。
    </p>
    <p>
        服务端的页面加载事件中，设置了一个判断条件，若请求中包含带有“ajax”键的查询字符串，则认为请求来自 AJAX 操作，此时以数据的 JSON 格式响应。
        否则（不带查询字符串），则正常使用本页面响应。
    </p>
    <p>
        在页面的脚本中，使用 JQuery 的 get 函数执行 AJAX get 请求，此请求附加了“ajax”键的查询字符串，因此会得到一个 JSON 数据响应。
        JSON 格式的数据受 JavaScript 原生支持，自动被转换为可操作的数据对象（整型数组）并可被进一步使用（此例中数组的元素被动态插入到名为 “datalist” 的列表中）。
    </p>

    <!--1. 按钮元素，点击此按钮时，调用脚本中的函数，开始 AJAX 获取数据的过程。-->
    <input type="button" value="获取数据" onclick="getData()" />

    <!--2. 空的列表，AJAX获取数据后，将数据中的内容动态插入到列表中。-->
    <ul id="datalist"></ul>

    <script>
        //3. 在脚本标签中，使用 JQuery 执行 get 请求。此请求地址即为本页面地址，但加上了“ajax”键的查询字符串。
        function getData() {
            $.get("?ajax=true", function (data) {
                //4. 请求成功响应后，会执行此函数。此函数的输入参数，即为返回的响应内容，本例中是 “text/json” 类型，会自动转换为 JavaScript 可操作的对象（整型数组）。

                //5. 在循环中使用数据，此例中为将数组中的值依次添加为 datalist 列表的项。
                for (var i = 0; i < data.length; i++) {
                    $("#datalist").append("<li>" + data[i] + "</li>");
                }
            });
        };
    </script>
</asp:Content>
